<template>
  <div>
    <el-row justify="space-around">

      <el-card class="card up" shadow="hover">
        <el-image :src="imgUrl[0]"/>
        <div>
          <span><h2>STUDY</h2></span>
          <el-card>
            对于学习我们可以通过不同分类的学习板块进行学习需要的内容，每个板块将会对应一个练习板块，您可以在其对所学知识进行巩固和提升！
          </el-card>
        </div>

      </el-card>

      <el-card class="card top" shadow="hover">
        <el-image :src="imgUrl[1]"/>
        <div>
          <span><h2>NOTE</h2></span>
          <el-card>
            针对笔记可以针对知识进行系统的笔记梳理！其中我们提供了丰富的笔记模板和AI进行辅助笔记记载。
          </el-card>
        </div>
      </el-card>

      <el-card class="card up" shadow="hover">
        <el-image :src="imgUrl[2]"/>
        <div>
          <span><h2>CODE</h2></span>
          <el-card>
            针对代码，我们将有一个在线的IDE提供给在网站中进行代码练习和学习的人，里面有我们提前准备好的练习提供，当然您也可以重新编写进行编译您想要的结果
          </el-card>
        </div>
      </el-card>

    </el-row>
  </div>
</template>

<script setup>
const imgUrl = [
    "http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E8%AF%A6%E6%83%85-2.png",
    "http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E8%AF%A6%E6%83%85-3.png",
    "http://qiniuyun.linter.top/Linter/Vue_img/Home/LunBo/%E8%AF%A6%E6%83%85-1.png"
]
</script>

<style scoped>
.card{
  width: 30%;
  border-radius: 20px;
}
.up{
  margin-top: 10%;
}
.top{
  height: auto;
}
</style>
